<script setup lang="ts">
import { articleModel } from '@/models/article';
import { Plus } from '@element-plus/icons-vue';
import { categorys } from '@/models/article';
import { QuillEditor } from '@vueup/vue-quill';
import '@vueup/vue-quill/dist/vue-quill.snow.css';

// token
import { useTokenStore } from '@/stores/token';
import { addArticleService, updateArticleService } from '@/api/article';
import { ElMessage } from 'element-plus';
const tokenStore = useTokenStore();

// 图片上传成功回调
const uploadSuccess = (result: any) => {
  articleModel.value.coverImg = result.data
  console.log(result.data);
}

// 发布文章
const addArticle = async (state: string) => {
  articleModel.value.state = state;
  try {
    let result = await addArticleService(articleModel.value);
    // console.log(result);
    if (state === '已发布') {
      ElMessage.success('发布成功');
    } else if (state === '草稿') {
      ElMessage.success('保存成功');
    }
    emits('update-visibleDrawer', false);
    props.fetchArticleList();
  }
  catch (err) {
    console.log(err);
  }

}

// 更新文章
const updateArticle = async (state: string) => {
  articleModel.value.state = state;
  let result = await updateArticleService(articleModel.value)
  console.log(result);
  ElMessage.success('修改成功');
  emits('update-visibleDrawer', false);
  props.fetchArticleList();
}
// 接受父传递的数据
const props = defineProps(['visibleDrawer', 'fetchArticleList', 'title']);
const visibleDrawer = props.visibleDrawer;
// 自定义emit事件(子传父)
const emits = defineEmits(['update-visibleDrawer']);
</script>

<template>
  <el-drawer v-model="visibleDrawer" :title="props.title" direction="rtl" size="50%">
    <!-- 添加文章表单 -->
    <el-form :model="articleModel" label-width="100px">
      <el-form-item label="文章标题">
        <el-input v-model="articleModel.title" placeholder="请输入标题"></el-input>
      </el-form-item>
      <el-form-item label="文章分类">
        <el-select placeholder="请选择" v-model="articleModel.categoryId">
          <el-option v-for="c in categorys" :key="c.id" :label="c.categoryName" :value="c.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="文章封面">

        <el-upload class="avatar-uploader" :auto-upload="true" :show-file-list="false" action="/api/upload" name="file"
          :headers="{ 'Authorization': tokenStore.token }" :on-success="uploadSuccess">
          <img v-if="articleModel.coverImg" :src="articleModel.coverImg" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="文章内容">
        <div class="editor">
          <quill-editor theme="snow" v-model:content="articleModel.content" contentType="html">
          </quill-editor>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
          @click="props.title == '编辑文章' ? updateArticle('已发布') : addArticle('已发布')">发布</el-button>
        <el-button type="info" @click="props.title == '编辑文章' ? updateArticle('草稿') : addArticle('草稿')">保存</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>

<style scoped lang="scss">
.avatar-uploader {
  :deep() {
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }

    .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }

    .el-upload:hover {
      border-color: var(--el-color-primary);
    }

    .el-icon.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      text-align: center;
    }
  }
}

.editor {
  width: 100%;

  :deep(.ql-editor) {
    min-height: 200px;
  }
}
</style>